import {defineComponent, ref, watch, shallowReactive, onMounted, onBeforeUnmount} from 'vue'
import * as echarts from "echarts";

// 声明类型
const PropsType = {
  cdata: {
    type: Object,
    require: true
  },
  width: {
    type: String,
    require: true
  },
  height: {
    type: String,
    require: true
  }
} as const

// 定义主体
export default defineComponent({
  props: PropsType,
  setup(props) {
    // 定义 ref
    const chartRef = ref()
    let timer = null
    // 配置项
    let options = shallowReactive({color:null,tooltip:null,legend:null, grid:null, yAxis:null, xAxis:null, dataZoom:null, series:null})
    // 控制显示几个柱子[从N开始,一次性展示N+1个]
    const [startValue, endValue] = [0, 6]

    // 自定义函数
    const methods = {
      clearInterval(timeId) {
        timeId && window.clearInterval(timeId)
      },customElements(){
        const cdata =  props.cdata;
        options = {
          color: ["#3398DB"],
          tooltip: {
            trigger: "axis",
            axisPointer: {
              // 坐标轴指示器，坐标轴触发有效
              type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
            },
          },
          grid: {
            top: "25",
            bottom: "5",
            left: "5",
            right: "5",
            containLabel: true,
          },
          legend: {
            show: true,
            type: "plain", //scroll滚动图例
            data: [cdata.series[0].name,cdata.series[1].name], //图裂名称（需填写）
            textStyle: {
              color: "#ffffff",
            },
          },
          dataZoom: [
            //滑动条
            {
              yAxisIndex: 0, //这里是从X轴的0刻度开始
              show: false, //是否显示滑动条，不影响使用
              type: "slider", // 这个 dataZoom 组件是 slider 型 dataZoom 组件
              startValue,// 从N开始。
              endValue // 一次性展示N+1个。
            },
          ],
          xAxis: {
            type: "value",
            //坐标轴两边留白策略
            boundaryGap: false,
            axisLabel: {
              show: false,
            },
            //是否显示分隔线。默认数值轴显示
            splitLine: {
              show: false,
              lineStyle: {
                color: "#fff",
                opacity: 0.1,
              },
            },
            axisTick: { show: false },
            //坐标轴线线的颜色
            axisLine: {
              show: true,
              lineStyle: {
                color: "#fff",
                opacity: 0.1,
              },
            },
          },
          yAxis: [
            {
              type: "category",
              inverse: true, //是否是反向坐标轴
              data: cdata.category,
              axisLabel: {
                show: true,
                inside: true,
                inverse: true,
                verticalAlign: 'bottom',
                lineHeight: 35,
              },
              //是否显示分隔线。默认数值轴显示
              splitLine: {
                show: true,
                lineStyle: {
                  color: "#fff",
                  opacity: 0.1,
                },
              },
              axisTick: { show: false },
              //坐标轴线线的颜色
              axisLine: {
                show: true,
                lineStyle: {
                  color: "#fff",
                  opacity: 0.1,
                },
              },
            },
          ],
          series: [
            {
              name: cdata.series[0].name,
              type: 'bar',
              stack: 'total',
              barWidth: 15,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {offset: 0, color: "#1f4191"},
                {offset: 1, color: "#1370fb"},
                /**
                 {offset: 0, color: "rgba(156,107,211,0.8)"},
                 {offset: 0.2, color: "rgba(156,107,211,0.5)"},
                 {offset: 1, color: "rgba(156,107,211,0.2)"}
                 */
              ]),
              label: {
                show: true
              },
              emphasis: {
                focus: 'series'
              },
              data: cdata.series[0].data,
            },
            {
              name: cdata.series[1].name,
              type: 'bar',
              stack: 'total',
              barWidth: 15,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {offset: 0, color: "#1370fb"},
                {offset: 1, color: "#3EACE5"},
                /**
                 {offset: 0, color: "#956FD4"},
                 {offset: 1, color: "#3EACE5"}
                 **/
              ]),
              label: {
                show: true
              },
              emphasis: {
                focus: 'series'
              },
              data: cdata.series[1].data,
            }
          ],
        };
        methods.clearInterval(timer)
        // 手动触发更新
        if (chartRef.value) {
          // 通过初始化参数打入数据
          chartRef.value.initChart(options)
        }

        // 使用定时器
        timer = setInterval(() => {
          if (options.dataZoom[0].endValue == cdata.category.length ) {
            options.dataZoom[0].startValue = startValue;
            options.dataZoom[0].endValue = endValue;
          } else {
            options.dataZoom[0].startValue = options.dataZoom[0].startValue + 1;
            options.dataZoom[0].endValue = options.dataZoom[0].endValue + 1;
          }
          // 手动触发更新
          if (chartRef.value) {
            // 通过初始化参数打入数据
            chartRef.value.initChart(options)
          }
        }, 5000)
      }
    }


    /**
     * 生命周期
     */
    onMounted(() => {
      methods.customElements()
    })
    onBeforeUnmount(() => {
      methods.clearInterval(timer)
    })
    // 监听
    watch(
        () => props,
        (props) => {
          methods.customElements()
        },
        {
          immediate: true,
          deep: true
        }
    )
    return () => {
      return <div>
        <echart ref={chartRef} options={options} height={props.height} width={props.width} />
      </div>
    }
  }
})

